<template>
    <div class="my-container totalCheckPage">
        <el-row :gutter="20">
            <el-col class="aaa" :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <div class="container-body" ref="containerBody">
                    <div class="toolbar" ref="toolbar">
                        <el-form :inline="true" :model="queryParams" size="small">
                            <el-button style="margin: 3px 6px 0 0;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
                            <el-form-item label="拌和楼">
                                <el-select style="width: 160px" v-model="queryParams.stationCode" clearable size="mini" placeholder="请选择拌合楼">
                                    <el-option v-for="item in cementListData" :key="item.id" :label="item.name" :value="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="配方编号">
                                <el-select style="width: 160px" v-model="queryParams.matchCode" clearable size="mini" placeholder="请选择配方编号">
                                    <!-- @change="matchCodeChange" -->
                                    <el-option v-for="item in quListData" :key="item.id" :label="item.matchCode" :value="item.matchCode"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
                                <!-- v-if="$hasPermission('api:asphaltDataWeight:produceWeight')" -->
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table border v-loading="loading" :data="dataList" size="mini" highlight-current-row stripe>
                        <!-- <el-table-column prop="name" label="所属基地" align="center"></el-table-column> -->
                        <el-table-column prop="stationName" label="拌合楼" align="center"></el-table-column>
                        <el-table-column prop="dischargeTime" label="日期" align="center"></el-table-column>
                        <el-table-column prop="matchCode" label="配方编号" align="center">
                            <template>
                                {{ queryParams.matchCode | showMatchType }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="weight" label="当日产量(t)" align="center"></el-table-column>
                        <el-table-column prop="totalWeight" label="累计量(t)" align="center"></el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { cementList, quList, pageCheck } from "@/api/waterStability/producedData/totalCheck";
import workSiteLeft from "@/views/components/workSiteLeft";


export default {
    name: 'totalCheck',
    components: {
        workSiteLeft
    },
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            cementListData: [],
            quListData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            loading: false,
            total: 0,
            dataList: []
        };
    },
    filters: {
        showMatchType(val) {
            if (val) {
                return val;
            }
            return '全部';
        }
    },
    mounted() {
        this.getCementList();
        this.getQuList()
        this.getList()
    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.handleQuery();
        },
        // 查询拌合楼下拉列表
        getCementList() {
            cementList().then((res) => {
                this.cementListData = res.data || [];
            });
        },
        // 查询配方编号下拉
        getQuList() {
            quList().then((res) => {
                this.quListData = res.data || [];
            });
        },
        getList() {
            this.loading = true;
            pageCheck(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
    }
};
</script>

<style scoped>
.totalCheckPage {
    padding: 16px;
}

.count-info {
    line-height: 40px;
}
</style>